<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center">
          {{ this.$t("my.securityCenter") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>

    <view class="gracy-body grace-margin-top container">
      <view class="security_box">
        <view
          class="box_list flex"
          @tap.stop="
            handleNavTo({ url: '/pages/auth/security/changePassword' })
          "
        >
          <view class="grace-list-title flex1">
            <text class="grace-list-title-text" style="color: #fff">
              {{ this.$t("my.safe.editLoginPassword") }}
            </text>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
        <view
          class="box_list flex"
          @tap.stop="
            handleNavTo({
              url: '/pages/auth/security/changeExchangePassword',
            })
          "
        >
          <view class="grace-list-title flex1">
            <text class="grace-list-title-text" style="color: #fff">
              {{ this.$t("my.safe.editPayPassword") }}
            </text>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
        <!-- <view
          class="grace-list-items grace-padding"
          @tap.stop="
            handleNavTo({
              url: '/pages/auth/cerify',
            })
          "
        >
          <view class="grace-list-body">
            <view class="grace-list-title">
              <text class="grace-list-title-text" style="color: #fff">
                实名认证
              </text>
            </view>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view> -->
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  methods: {
    handleNavBack() {
      uni.navigateBack();
    },
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  onLoad() {
    if (!this.user) this.loadUser();
  },
  methods: {
    ...mapActions("user", ["loadUser"]),
  },
};
</script>

<style scoped>
.bdb {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.container {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.security_box {
  width: 100%;
  height: 234rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
}
.box_list {
  width: 100%;
  height: 110rpx;
  border-bottom: 1px solid #151935;
  align-items: center;
}
</style>
